<script setup lang="ts">
import MyFooter from '@/components/MyFooter.vue'
import router from '@/router'
import { get } from '@/utils/service'
import { VUE_APP_BASE_API, SESSION_LAST_CODE, SESSION_MEMBER_INFO } from '@/utils/baseConfig'
import { showNotify } from 'vant' // 可选：根据你的UI库引入提示组件，如 Element-UI, Vant 等
import { ref } from 'vue'
const memberStaticModel = ref({})
const memberInfo = ref({})
const avatarImg = ref(VUE_APP_BASE_API + '/images/vue/myInfo.png')
memberStaticWechat()
function memberStaticWechat() {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  get('/memberWechatNew/memberStaticWechat', {})
    .then((res) => {
      if (res.code === 0) {
        memberStaticModel.value = res.data
      } else {
        showNotify({
          type: 'danger',
          message: '获取会员信息失败',
          color: '#FFF',
          background: '#797979',
        })
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
queryCarMasterWechat()
function queryCarMasterWechat() {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  get('/memberWechatNew/queryCarMasterWechat', {})
    .then((res) => {
      if (res.code === 0) {
        const member = res.data.member
        memberInfo.value = member
        const tempAvatarUrl = memberInfo.value.avatarUrl
        console.log(tempAvatarUrl)
        if (tempAvatarUrl != null && tempAvatarUrl != '') {
          if (tempAvatarUrl.indexOf('https') != -1) {
            avatarImg.value = memberInfo.value.avatarUrl
          } else {
            avatarImg.value = VUE_APP_BASE_API + memberInfo.value.avatarUrl
          }
        }
      } else {
        showNotify({
          type: 'danger',
          message: '获取会员信息失败',
          color: '#FFF',
          background: '#797979',
        })
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
const regState = memberInfo.value ? true : false
function clearMember() {
  const code = localStorage.getItem(SESSION_LAST_CODE)
  localStorage.removeItem(SESSION_MEMBER_INFO + code)
  localStorage.removeItem(SESSION_LAST_CODE)
  localStorage.clear()
  showNotify({ type: 'success', message: '缓存清理成功,请从菜单进入系统。', duration: 3000 })
}
function goMemberInfo() {
  router.push('/memberInfo')
}
</script>
<template>
  <van-row style="height: 140px; width: 100%; background-color: #c82030; min-width: 320px">
    <van-col span="4" style="padding: 20px" to="" @click="goMemberInfo">
      <van-image round width="100px" height="100px" :src="avatarImg" />
    </van-col>
    <van-col span="10" offset="4">
      <div style="padding-top: 35px; margin-left: 12px; color: #fff">
        <h2 v-if="regState == true">{{ memberInfo.name || '默认会员' }}</h2>
        <h2 v-else>未登录</h2>
        <h3 v-if="regState == true">{{ memberInfo.memberShipLevelName }}</h3>
      </div>
    </van-col>
  </van-row>
  <div class="mainContent">
    <van-cell-group inset class="velGroupCell">
      <van-cell
        title="我的积分"
        :value="memberStaticModel.poinNum"
        :icon="VUE_APP_BASE_API + '/images/vue/point.png'"
        size="large"
        to="/myPoint"
        is-link
      />
      <van-cell
        title="我的优惠卷"
        :value="memberStaticModel.couponNum"
        :icon="VUE_APP_BASE_API + '/images/vue/myCoupon.png'"
        size="large"
        to="/myCoupon"
        is-link
      />
      <van-cell
        title="我的套餐"
        :value="memberStaticModel.packageNum"
        :icon="VUE_APP_BASE_API + '/images/vue/myPackage.png'"
        size="large"
        to="/memberCard"
        is-link
      />
      <van-cell
        title="我的预约"
        :value="memberStaticModel.bookingNum"
        :icon="VUE_APP_BASE_API + '/images/vue/myOnline.png'"
        size="large"
        is-link
        to="/myOnline"
      />
    </van-cell-group>
    <van-cell-group inset class="velGroupCell" style="margin-top: 12px">
      <van-cell title="经纪人" size="large" />
      <van-cell
        title="我的佣金"
        :value="memberStaticModel.rewardMoney"
        :icon="VUE_APP_BASE_API + '/images/vue/myRedBag.png'"
        size="large"
        is-link
        to="/myReward"
      />
      <van-cell
        title="我推荐的客户"
        :value="memberStaticModel.agentNum"
        :icon="VUE_APP_BASE_API + '/images/vue/mySpreadCustomer.png'"
        size="large"
        is-link
        to="/myRecommendCustomer"
      />
      <van-cell
        title="我的下级"
        :value="memberStaticModel.childNum"
        :icon="VUE_APP_BASE_API + '/images/vue/mySubMember.png'"
        size="large"
        is-link
        to="/myChildreen"
      />
      <van-cell
        title="推广码"
        :icon="VUE_APP_BASE_API + '/images/vue/qorcodeIcon.png'"
        size="large"
        is-link
        to="/mySpreadQrCode"
      />
    </van-cell-group>
    <van-cell-group inset class="velGroupCell" style="margin-top: 12px">
      <van-cell title="车主信息" size="large" />
      <van-cell
        title="车主信息"
        :icon="VUE_APP_BASE_API + '/images/vue/myCarMaster.png'"
        size="large"
        is-link
        to="/carMasterInfo"
      />
      <van-cell
        title="会员信息"
        :icon="VUE_APP_BASE_API + '/images/vue/memberInfo.png'"
        size="large"
        is-link
        to="/memberInfo"
      />
      <van-cell
        title="更改电话"
        :icon="VUE_APP_BASE_API + '/images/vue/changeMobile.png'"
        size="large"
        is-link
        to="/changeMobilePhone"
      />
      <van-cell
        title="保养记录"
        :icon="VUE_APP_BASE_API + '/images/vue/receptionRecord.png'"
        size="large"
        is-link
        to="/myReception"
      />
    </van-cell-group>
  </div>
  <br />
  <br />
  <div style="padding: 12px; width: 100%">
    <van-button type="default" class="clearButton" @click="clearMember">清理缓存</van-button>
  </div>
  <br />
  <br />
  <MyFooter></MyFooter>
</template>

<style>
.van-icon__image {
  display: block;
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
}
.clearButton {
  background-color: #d7d7d7;
  color: #797979;
  width: 100%;
}
</style>
